<template>
  <div
    id="container"
    v-loading="isGaming"
    element-loading-text="游戏运行中,请不要离开当前页面..."
    element-loading-spinner="el-icon-loading"
  >
    <img src="../../public/飞机大战.jpg" alt="" />
    <el-button type="primary" @click="beginGame">开始游戏</el-button>
  </div>
</template>
<script>
import EventBus from "../utils/eventbus";
export default {
  data() {
    return {
      isGaming: false,
    };
  },

  methods: {
    beginGame() {
      window.socket.send("game");
      this.isGaming = true;
      // 接受游戏数据
      EventBus.$on("game", (data) => {
        this.isGaming = false;
        console.log(data);
      });
    },
  },
};
</script>
<style >
#container {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-loading-text,.el-icon-loading{
  font-size: 30px !important;
}
</style>